// import * as React from 'react';
// import './index.module.scss';
// const { useState, useCallback, useEffect, useMemo, memo } = React;

// interface CitySelectorProps {
//   show: boolean;
//   cityData: {
//     cityList: Section[];
//   };
//   isLoading: boolean;
//   onBack: () => void;
//   fetchCityData: () => void;
//   onSelect: (val: string) => void;
// }

// const CitySelector = memo(function CitySelector(props: CitySelectorProps) {
//   const { show, cityData, isLoading, onBack, fetchCityData, onSelect } = props;

//   const [searchKey, setSearchKey] = useState('');

//   const key = useMemo(() => searchKey.trim(), [searchKey]);

//   useEffect(() => {
//     if (!show || cityData || isLoading) {
//       return;
//     }

//     fetchCityData();
//   }, [show, cityData, isLoading]);

//   const toAlpha = useCallback((alpha: string) => {
//     document.querySelector(`[data-cate='${alpha}']`)?.scrollIntoView();
//   }, []);

//   const outputCitySections = () => {
//     if (isLoading) {
//       return <div>loading</div>;
//     }

//     if (cityData) {
//       return (
//         <CityList
//           sections={cityData.cityList}
//           onSelect={onSelect}
//           toAlpha={toAlpha}
//         />
//       );
//     }

//     return <div>error</div>;
//   };

//   return (
//     <div styleName={!show ? 'city-selector' : 'city-selector hidden'}>
//       <div styleName="city-search">
//         <div styleName="search-back" onClick={() => onBack()}>
//           <svg width="42" height="42">
//             <polyline
//               points="25,13 16,21 25,29"
//               stroke="#fff"
//               strokeWidth="2"
//               fill="none"
//             />
//           </svg>
//         </div>
//         <div styleName="search-input-wrapper">
//           <input
//             type="text"
//             value={searchKey}
//             styleName="search-input"
//             placeholder="城市、车站的中文或拼音"
//             onChange={(e) => setSearchKey(e.target.value)}
//           />
//         </div>
//         <i
//           onClick={() => setSearchKey('')}
//           styleName={key.length === 0 ? 'search-clean hidden' : 'search-clean'}
//         >
//           &#xf063;
//         </i>
//       </div>
//       {Boolean(key) && (
//         <Suggest searchKey={key} onSelect={(key: string) => onSelect(key)} />
//       )}
//       {outputCitySections()}
//     </div>
//   );
// });

// export default CitySelector;
